<template>
  <div class="wrapper" ref="wrapper">
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script>
import bscroll from "better-scroll";
export default {
  name: "better-bscroll",
  data() {
    return {
      scroll: null,
    };
  },
  props: {
    probeType: {
      type: Number,
      default: 0,
    },
    pullUpLoad: {
      type: Boolean,
      default: true,
    },
  },
  mounted() {
    //被挂载的时候     better-scroll的使用
    //默认情况  不监听实时滚动
    // probeType  0 和1都不监听
    // 2 手指在上面 ，进行监听 ，离开后由于惯性滚动不进行监听
    //3  只要是滚动  都监听
    // this.scroll = new bsrcoll(document.querySelector(".wrapper"), {
    //   probeType: 3,
    //   clickA: true,
    //   pullUpLoad: true, //上啦加载更多
    // });
    // this.scroll.on("scroll", (position) => {
    //   //监听滚动事件
    // });
    this.scroll = new bscroll(this.$refs.wrapper, {
      pullUpLoad: this.pullUpLoad, //上啦加载4
      click: true,
      observeDOM: true,
      // observeImage: true,
      mouseWheel: true,
      // 等到页面图片加载完之后，刷新content高度
      observeImage: this.observeImage,
      probeType: this.probeType, //实时监听
    });
    this.scroll.on("scroll", (position) => {
      this.$emit("scroll", position);
    });
    this.scroll.on("pullingUp", () => {
      this.$emit("pullingUp");
    });
  },
  methods: {
    scrollTo(x, y, timeout = 300) {
     // console.log("我滚动了");
      this.scroll && this.scroll.scrollTo(x, y, timeout); //判断有没有值从而执行后面的代码
    },
    finishPullUp() {
      this.scroll && this.scroll.finishPullUp();
    },
    refresh() {
      //在元素被加载完后重新进行计算高度     从而避免滚动不了的bug
      // console.log("refresh了一次");
      this.scroll && this.scroll.refresh();
    },
  },
};
</script>

<style>
</style>